import ActivityCard from '@/components/activity-card/activity-card'
import TabbarComp from '@/components/tab-bar/tab-bar'
import useHandleScroll from '@/hooks/use-handle-scroll'
import { List, Tabs } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import './singupActivity.less'

export default function SingupActivity() {
    const [activitys, setActivitys] = useState([])
    const [activityStatus, setActivityStatus] = useState('0')

    const [total, setTotal] = useState(0)
    const { filterParams,setFilterParams } = useHandleScroll('activity-list', total)
    useEffect(() => {
        setFilterParams({...filterParams,page:1})
        setActivitys([])
    }, [activityStatus])
    useEffect(() => {
        fetch("/app/base/activitySignup/page", {
            method: "POST",
            body: JSON.stringify({...filterParams,status:activityStatus}),
            headers: {
                "Content-Type": "application/json"
            }
        }).then(res => res.json()).then(res => {
            setTotal(res.data.pagination.total)
            setActivitys([...activitys, ...res.data.list])
        })
    }, [filterParams])
    return (
        <div className='singupActivity'>
            <Tabs onChange={(status) => setActivityStatus(status)}>
                <Tabs.Tab title='未开始' key='0'></Tabs.Tab>
                <Tabs.Tab title='进行中' key='1'></Tabs.Tab>
                <Tabs.Tab title='已结束' key='2'></Tabs.Tab>
            </Tabs>
            <div className='activity-box'>
                <div className='activity-list' id='activity-list'>
                    <List>
                        {
                            activitys.map((item: any, index: React.Key | null | undefined) =>
                                <List.Item key={index}>
                                    <ActivityCard item={item}></ActivityCard>
                                </List.Item>
                            )
                        }
                    </List>
                </div>
            </div>
            <TabbarComp></TabbarComp>
        </div>
    )
}
